import { Component, OnInit ,Input,Output ,SimpleChanges ,OnChanges,EventEmitter  } from '@angular/core';
import {OrdinalPipe} from '../../pipe/ordinal.pipe'
interface person{
    name:string,
    age:number
}
interface Grocery {
  id: number;
  label: string;
}
@Component({
  selector: 'app-p2-c1',
  templateUrl: './p2-c1.component.html',
  styleUrls: ['./p2-c1.component.css'],
  inputs:['count:value']
  // encapsulation:ViewEncapsulation.Emulated
})
export class P2C1Component implements OnInit {
    // count: number = 0;
    @Input() count:number;
    @Output() countChange:EventEmitter<number>=new EventEmitter<number>();
    public name:String;
    groceries:any
    nums:person[];
    constructor() {
        this.nums=[{name:'sam',age:15},{name:'jame',age:20},{name:'jerry',age:16},{name:'rob',age:29},{name:'stanis',age:30},{name:"cesse",age:40}];
         this.groceries = [{id: 1, label: 'Butter'}, {id: 0, label: 'Apples'}, {id: 2, label: 'Paprika'}, {id: 3, label: 'Potatoes'}, {id: 4, label: 'Oatmeal'}, {id: 5, label: 'Spaghetti'}, {id: 6, label: 'Pears'}, {id: 7, label: 'Bacon'
    }];
    }

    ngOnInit() {
    }
    ngOnChanges(changes:SimpleChanges){
        console.log('changing',changes)
    }

    

    increment() {
        this.count++;
        this.countChange.emit(this.count);
    }

    decrement() {
        this.count--;
        this.countChange.emit(this.count)
    }
    trackByAge(index:number,num:person):number{
        console.log(index+':'+num.name+','+num.age)
        return num.age
    }
    trackByGrocery(index: number, grocery: Grocery): number {
    return grocery.id
  }

}
